﻿@page "/rich-text-editor/markdown-overview"

@using Syncfusion.Blazor.RichTextEditor
@using Markdig;

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates markdown editing in the Rich Text Editor with complete features.</p>
</SampleDescription>
<ActionDescription>
   <p>The <a href="https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor">Blazor Rich Text Editor</a> supports <a href=" https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor/wysiwyg-markdown-editor">markdown editing</a> when the <code>EditorMode</code> is set to mode property of the Rich Text Editor</p>
    <ul>
        <li><code>Lists</code> - Ordered and unordered list types.</li>
        <li><code>Links</code> - A hyperlink can be inserted into the editor for quick access to related information.</li>
        <li><code>Image</code> - Inserts and manages images.</li>
        <li><code>Alignment</code> - Aligns the content with left, center, and right margins.</li>
        <li><code>Format</code> – Formats the sentence in different ways such as heading level, quotation, and code snippet</li>
        <li><code>Styles</code> – Allows you to apply inline styles to the selected content like bold, italic, and more.</li>
        <li><code>Tables</code> – Allows you to insert a table with header.</li>
    </ul>
</ActionDescription>

<div class="control-section">
    @if (!IsPreview)
    {
        <SfRichTextEditor Height="250px" EditorMode="EditorMode.Markdown" SaveInterval="1" @bind-Value="@MarkdownValue">
            <RichTextEditorToolbarSettings Items="@Tools">
                <RichTextEditorCustomToolbarItems>
                    <RichTextEditorCustomToolbarItem Name="Preview">
                        <Template>
                            <button id="preview-code" class="e-tbar-btn e-control e-btn e-icon-btn" @onclick="PreviewClick">
                                <span class="e-btn-icon e-md-preview e-icons"></span>
                            </button>
                        </Template>
                    </RichTextEditorCustomToolbarItem>
                </RichTextEditorCustomToolbarItems>
            </RichTextEditorToolbarSettings>
            <RichTextEditorMarkdownOptions ListSyntax="@ListSyntax" />
            <RichTextEditorEvents ValueChange="@OnValueChange" />
        </SfRichTextEditor>
    }
    else
    {
        <SfRichTextEditor Readonly="true" @bind-Value="@HtmlValue">
            <RichTextEditorToolbarSettings Items="@Items">
                <RichTextEditorCustomToolbarItems>
                    <RichTextEditorCustomToolbarItem Name="code">
                        <Template>
                            <button id="MD_Preview" class="e-tbar-btn e-control e-btn e-icon-btn" @onclick="CodeClick">
                                <span class="e-btn-icon e-preview e-icons"></span>
                            </button>
                        </Template>
                    </RichTextEditorCustomToolbarItem>
                </RichTextEditorCustomToolbarItems>
            </RichTextEditorToolbarSettings>
        </SfRichTextEditor>
    }
</div>

@code{
    private bool IsPreview { get; set; }
    private string HtmlValue { get; set; }
    private MarkdownPipeline Pipeline { get; set; }

    private string MarkdownValue { get; set; } = @"The sample is added to showcase **markdown editing**.

Type or edit the content and apply formatting to view markdown formatted content.

We can add our own custom formation syntax for the Markdown formation, [sample link](https://blazor.syncfusion.com/demos/rich-text-editor/markdown-custom-format).

The third-party library **Marked** is used in this sample to convert markdown into HTML content.";

    private List<ToolbarItemModel> Items = new List<ToolbarItemModel>() {
        new ToolbarItemModel() { Name = "code", TooltipText = "Code View" },
    };

    private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
    {
        new ToolbarItemModel() { Command = ToolbarCommand.Bold },
        new ToolbarItemModel() { Command = ToolbarCommand.Italic },
        new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Command = ToolbarCommand.Formats },
        new ToolbarItemModel() { Command = ToolbarCommand.OrderedList },
        new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
        new ToolbarItemModel() { Command = ToolbarCommand.Image },
        new ToolbarItemModel() { Command = ToolbarCommand.CreateTable },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Name = "Preview", TooltipText = "Preview" },
        new ToolbarItemModel() { Command = ToolbarCommand.Undo },
        new ToolbarItemModel() { Command = ToolbarCommand.Redo }
    };

    private Dictionary<string, string> ListSyntax { get; set; } = new Dictionary<string, string>(){
        { "OL", "1., 2., 3." }
    };

    protected override void OnInitialized()
    {
        Pipeline = new MarkdownPipelineBuilder().UseAdvancedExtensions().Build();
        this.HtmlValue = Markdig.Markdown.ToHtml(MarkdownValue, Pipeline);
        base.OnInitialized();
    }

    private void OnValueChange(Syncfusion.Blazor.RichTextEditor.ChangeEventArgs args)
    {
        if (args.Value == null)
        {
            this.HtmlValue = null;
        }
        else
        {
            this.HtmlValue = Markdig.Markdown.ToHtml(args.Value, Pipeline);
        }
    }

    private void PreviewClick()
    {
        this.IsPreview = true;
    }

    private void CodeClick()
    {
        this.IsPreview = false;
    }
}

<style>
    .e-icon-btn .e-preview::before {
        content: '\e790';
    }

    .bootstrap4 .e-icon-btn .e-md-preview::before {
        content: '\e787';
    }

    .e-icon-btn.e-active .e-md-preview::before {
        content: '\e350';
    }

    .e-icon-btn .e-md-preview::before {
        content: '\e345';
    }

    .bootstrap4 .e-icon-btn.e-active .e-view-side::before {
        content: '\e350';
    }

    .bootstrap4 .e-icon-btn .e-view-side::before {
        content: '\e350';
    }

    .tailwind .e-icon-btn .e-md-preview::before {
        content: '\e7d0';
    }

    .tailwind .e-icon-btn .e-preview::before {
        content: '\e748';
    }

    .e-icon-btn .e-active .e-view-side::before {
        content: '\e350';
    }

    .e-icon-btn .e-view-side::before {
        content: '\e350';
    }
</style>